<template>
  <div class="recumentStatus">
    <div class="machine-img">
      <div
        class="machine-box"
        v-for="(item, index) in machineInfo"
        :key="item.id"
        :style="{
          top: 168 + index * 54 + 'px',
          left: '110px',
          border: selected == item.grid ? '2px solid #5600ff' : 'none',
          backgroundColor: outRecumentGlass.includes(item.grid)
            ? 'red !important'
            : item.status == 1
            ? 'black !important'
            : selected == item.grid
            ? '#409eff '
            : '#edeeef',
        }"
      >
        <div
          class="machine-box-item"
          :style="{
            color: item.status == 1 ? '#fff' : 'black',
          }"
        >
          {{ item.grid }}
        </div>
        <div class="machine-box-process">
          <div v-if="!outRecumentGlass.includes(item.grid) && item.status == 0">
            {{
              Math.floor(
                ((item.useSpaceXSum * item.useSpaceYSum -
                  item.useSpaceX * item.useSpaceY) /
                  (item.useSpaceXSum * item.useSpaceYSum)) *
                  100
              )
            }}%
          </div>
          <div
            v-if="!outRecumentGlass.includes(item.grid) && item.status == 1"
            class="text"
          >
            已冻结
          </div>
          <div v-if="outRecumentGlass.includes(item.grid)" class="text2">
            正在出笼...
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listMachine } from "@/api/assembly/machine";
import { mapState } from "vuex";
import { updateGlassState } from "@/api/assembly/glass";
export default {
  props: {
    radio: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      selected: 0,
      machineInfo: [],
      loading: false,
    };
  },
  created() {
    this.selected = 0;
    this.getMachine();
    this.$store.dispatch("listGlass");
  },
  methods: {
    handleFreeze() {},
    handleForceCome() {},
    getGlassList() {},
    /**
     * radio 选中发生变化 切换卧理机
     */
    handlerRecumentChnage(e) {
      console.log("切换了");
      window.localStorage.setItem("recumentRadio", this.radio);
      this.loading = true;
      this.selected = 0;
      this.getMachine();
    },
    getMachine() {
      let params = {
        type: this.radio,
      };
      
      listMachine(params)
        .then((res) => {
          this.machineInfo = res.rows;
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    handleUpdate(row, state) {
      updateGlassState(row.id, state).then((res) => {
        this.$modal.msgSuccess(res.msg);
        this.getList();
      });
    },
    handlerGirdClick(grid) {
      this.selected == grid ? (this.selected = 0) : (this.selected = grid);
      this.$emit("getGirdClickEvent", grid);
    },
  },
  computed: {
    ...mapState({
      glassList: (state) => state.Glass.glass,
    }),
    recmnetGlassList() {
      let arr = {
        1: [6, 9],
        2: [7, 10],
        3: [8, 11],
      };
      let arr2 = [];
      for (let key in arr) {
        if (this.radio == key) {
          arr2 = this.glassList
            .filter(
              (item) => item.place == arr[key][0] || item.place == arr[key][1]
            )
            .filter((item) =>
              this.selected == 0 ? true : item.grid == this.selected
            );
          this.selected == 0
            ? arr2.reverse()
            : arr2.sort((a, b) => {
                return a.gridGroup - b.gridGroup;
              });
          break;
        }
      }
      return arr2;
    },
    outRecumentGlass() {
      return this.glassList
        .filter((item) =>
          this.radio == 1
            ? item.place == 9
            : this.radio == 2
            ? item.place == 10
            : this.radio == 3
            ? item.place == 11
            : false
        )
        .map((item) => item.grid);
    },
  },
  mounted() {},
  beforeDestroy() {},
  watch:{
    radio(){
       this.getMachine();
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.recumentStatus {
  width: 100%;
  height: 100%;
  transform: translateY(-20px);
}
.machine-img {
  position: relative;
  width: 100%;
  height: 100%;
  border-right: 1px dashed #e6e6e6;
  background-image: url("../../../assets/images/lplPhoto.png");
  background-repeat: no-repeat;
  background-size: 95% 100%;
  .machine-box {
    position: absolute;
    height: 39px;
    width: 61%;
    background-color: rgba($color: #a6a9ad, $alpha: 0.2);
    z-index: 999;
    display: flex;
    align-items: center;
    .machine-box-item {
      font-size: 24px;
      padding-left: 5px;
    }
    .machine-box-process {
      margin-left: auto;
      font-size: 24px;
      padding-right: 5px;
      .text {
        color: #fff;
        font-size: 16px;
      }
      .text2 {
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 16px;
        letter-spacing: 2px;
      }
    }
  }
  // .machine-box:hover {
  //   background-color: #409eff !important;
  // }
}
</style>